<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/video-js.min.css" rel="stylesheet">
    <!-- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> -->
    <!-- <script src="https://unpkg.com/video.js/dist/video.js"></script> -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.danmu.js"></script>
    <script src="js/video.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .container {
            width: 1000px;
            margin: 0 auto;
        }

        .video-wrapper {
            position: relative;
        }

        .video-wrapper video {
            width: 100%;
        }

        .video-wrapper canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 563px;
        }


        .video-wrapper .tool-box {
            height: 38px;
        }

        .video-wrapper input,
        .video-wrapper button {
            height: 100%;
            margin-right: 15px;
            vertical-align: middle;
            outline: none;
            border: none;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .video-wrapper .danmu-input {
            width: 300px;
            border: 1px solid #ccc;
        }

        .video-wrapper .danmu-btn {
            color: #fff;
            background-color: orange;
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <p style="font-size: xx-large;height: 48px" id="mediaTitle">&nbsp;</p>
        <div class="video-wrapper">
            <canvas id="J_danmuCanvas"></canvas>
            <video class="video-js vjs-default-skin vjs-big-play-centered" id="myVideo" controls>
                <source id="source"
                    src="https://video.shenxuanche.com/transcode_sxc_57f97ad5-a29d-15a9-d6e3-97a4aec43eb1_720p.mp4">

            </video>
            <div class="tool-box">
                <input type="text" class="danmu-input">
                <button class="danmu-btn">发送弹幕</button>
                <input type="color" class="color-input">
                
                <select>
                    <option></option>
                </select>
            </div>
        </div>
    </div>
    <script>
        var myVideo = videojs('myVideo', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            playbackRates: [0.5, 1, 1.5, 2, 3],
        })
        myVideo.play();
        // danmu  index.js
        class VideoDanmu {
  constructor (video, canvas, options) {
    if (!video || !canvas || !options || !isObject(options)) return;
    if (!options.danmuData || !isArray(options.danmuData)) return;

    this.video = video;
    this.canvas = canvas;
    this.canvasCtx = canvas.getContext('2d');
    this.canvas.width = video.offsetWidth;
    this.canvas.height = video.offsetHeight;

    this.danmuPaused = true;

    Object.assign(this, options, {
      speed: 2,
      runTime: 0,
      color: '#fff'
    });

    this.danmuPool = this.createDanmuPool();
    this.render();
  }

  createDanmuPool () {
    return this.danmuData.map(dm => new Danmu(dm, this));
  }

  render () {
    this.clearRect();
    this.renderDanmu();
    !this.danmuPaused && requestAnimationFrame(this.render.bind(this));
  }

  renderDanmu () {
    let currentTime = this.video.currentTime;

    this.danmuPool.map((danmu) => {
      if (!danmu.stopRender && currentTime >= danmu.runTime) {
         if (!danmu.isInitialized) {
           danmu.initialize();
           danmu.isInitialized = true;
         }
         danmu.X -= danmu.speed;
         danmu.render();

         if (danmu.X <= danmu.width * -1) {
           danmu.stopRender = true;
         }
      }
    })
  }

  reset () {
    this.clearRect();
    let currentTime = this.video.currentTime;

    this.danmuPool.map((danmu) => {
      danmu.stopRender = false;

      if (currentTime <= danmu.runTime) {
        danmu.isInitialized = false;
      } else {
        danmu.stopRender = true;
      }
    })
  }

  add (data) {
    this.danmuPool.push(new Danmu(data, this));
  }

  clearRect () {
    this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}


        // index.js
        // import VideoDanmu from './danmu'  ;
      
        const danmuData = [{
                content: '我真的好喜欢这首钢琴曲',
                runTime: 10,
                speed: 2,
                color: 'red'
            },
            {
                content: '这首钢琴曲是红猪里的一去不复返的时光',
                runTime: 0,
                speed: 4,
                color: 'orange'
            },
            {
                content: '久石让是我最崇拜的音乐家之一',
                runTime: 15,
                speed: 4,
                color: 'green'
            }
        ]
        const oDanmuVideo = document.getElementById('J_danmuVideo'),
            oDanmuCanvas = document.getElementById('myVideo'),
            oDanmuBtn = document.getElementsByClassName('danmu-btn')[0],
            oDanmuInput = document.getElementsByClassName('danmu-input')[0],
            oColorInput = document.getElementsByClassName('color-input')[0];

        const init = () => {
            console.log(danmuData)
            window.videoDanmu = new VideoDanmu(
                oDanmuVideo,
                oDanmuCanvas, {
                    danmuData
                }
            )
            bindEvent();
        }

        function bindEvent() {
            oDanmuVideo.addEventListener('play', handleVideoPlay, false);
            oDanmuVideo.addEventListener('pause', handleVideoPause, false);
            oDanmuVideo.addEventListener('seeked', handleVideoSeek, false);
            oDanmuBtn.addEventListener('click', handleToolClick, false);
        }

        function handleVideoPlay() {
            videoDanmu.danmuPaused = false;
            videoDanmu.render();
        }

        function handleVideoPause() {
            videoDanmu.danmuPaused = true;
        }

        function handleVideoSeek() {
            videoDanmu.reset();
        }

        function handleToolClick() {
            if (videoDanmu.danmuPaused) return;

            const inputValue = oDanmuInput.value.trim();

            if (!inputValue.length) return;

            const colorValue = oColorInput.value,
                runTime = oDanmuVideo.currentTime;

            const _data = {
                content: inputValue,
                color: colorValue,
                runTime
            }

            videoDanmu.add(_data);
            oDanmuInput.value = '';
        }


        init();

        //  damu.js
        class Danmu {
            constructor(danmu, fCtx) {
                this.content = danmu.content;
                this.runTime = danmu.runTime;
                this.danmu = danmu;
                this.ctx = fCtx;
            }

            initialize() {
                this.color = this.danmu.color || this.ctx.color;
                this.speed = this.danmu.speed || this.ctx.speed;
                this.fontSize = 30;
                this.width = getTextWidth(this.content, this.fontSize);
                getTextPosition(this.ctx.canvas, this.fontSize, this);
            }

            render() {
                this.ctx.canvasCtx.font = this.fontSize + 'px Microsoft Yahei';
                this.ctx.canvasCtx.fillStyle = this.color;
                this.ctx.canvasCtx.fillText(this.content, this.X, this.Y);
            }
        }
        
        // util的东西
        function isObject(value) {
            const type = Object.prototype.toString.call(value);
            return type === '[object Object]';
        }

        function isArray(value) {
            return Array.isArray(value);
        }

        function getTextWidth(content, fontSize) {
            const _span = document.createElement('span');
            _span.innerText = content;
            _span.style.fontSize = fontSize + 'px';
            _span.style.position = 'absolute';
            document.body.appendChild(_span);
            let width = _span.offsetWidth;
            document.body.removeChild(_span);
            return width;
        }

        function getTextPosition(wrapper, fontSize, ctx) {
            const X = wrapper.width;
            let Y = wrapper.height * Math.random();

            Y < fontSize && (Y = fontSize);
            Y > wrapper.height - fontSize && (Y = wrapper.height - fontSize);

            ctx.X = X;
            ctx.Y = Y;
        }
        $(function() {
            var videoPanelMenu = $(".vjs-fullscreen-control");
            videoPanelMenu.before(`<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">
		<div class="vjs-menu" role="presentation">
		<ul class="vjs-menu-content" role="menu">
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(1)">普通</li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(2)">标清 </li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(3)">高清 </li>
		</ul></div>
		<button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">
				<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>
			</button>
		</div>`);

            var obj = {
                tag: false,
                ctime: 0
            };
            window.obj = obj;
            var myPlayer = videojs.getPlayers()['myVideo'];
            myPlayer.on("timeupdate", function() {

                if (window.obj.tag) {
                    videojs("myVideo").currentTime(window.obj.ctime)
                    videojs("myVideo").play();
                    window.obj.tag = false;
                }

                //视频打点
                // var ctime_=videojs("my_video_1").currentTime().currentTime();
                // if(ctime_==60){
                // 	videojs("my_video_1").currentTime(ctime_+1);
                // }


            });
        })
        // 切换清晰度
        function changeVideo(type) {
            if (type == 1) {
                videojs("myVideo").src(
                    "https://video.shenxuanche.com/transcode_sxc_57f97ad5-a29d-15a9-d6e3-97a4aec43eb1_720p.mp4");
                videojs("myVideo").play();


            }
            if (type == 2) {
                videojs("myVideo").src(
                    "https://video.shenxuanche.com/transcode_sxc_0ab87870-f4b6-e0c9-9f8c-f8c4e79268b1_720p.mp4");
                videojs("myVideo").play();

            }
            if (type == 3) {
                videojs("myVideo").src(
                    "https://video.shenxuanche.com/transcode_sxc_afdb73e1-10b2-3e44-d553-ff9e3a78db6b_720p.mp4");
                videojs("myVideo").play();
            }
            window.obj.tag = true;
        }
    </script>
</body>

</html>